<template>
  <svg :class="[svgClass, disabled ? 'disabled' : '']" aria-hidden="true" :style="wh">
    <use :href="symbolId"  :fill="color"/>
  </svg>
</template>

<script setup lang="ts">
interface IProps {
  name: string;
  disabled?: boolean;
  size?: string;
  color?: string;
}

const props = defineProps<IProps>();
const wh = computed(() => {
  if (props.size) {
    return {width: props.size || 'auto', height: props.size || 'auto'};
  } else {
    return {};
  }
});
const symbolId = computed(() => `#icon-${props.name}`);
const svgClass = computed(() => {
  if (props.name) {
    return `svg-icon svg-icon-${props.name}`;
  }
  return 'svg-icon';
});
</script>

<style scoped lang="scss">
.svg-icon {
  width: 1rem;
  height: 1rem;
  //vertical-align: -0.2em;
  //fill: v-bind(color);
  //color: v-bind(color);

}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  filter: grayscale(0.7) opacity(0.5);

  &:hover {
    cursor: not-allowed;
  }
}
</style>